<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }

        ul {
            display: flex;
        }

        li {
            border: 1px solid;
            list-style: none;
        }

        .box {
            border: 1px solid;
            width: 400px;
            height: 400px;
            position: absolute;
        }

        .car {
            position: absolute;
            top: 40%;

        }

        .car ul {
            display: block;
        }

        .car ul li {
            width: 800px;
            height: 100px;
            display: flex;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<body>
    <div id="box">
        <div class="tab">
            <ul @click="fn($event)">
                <li>tab1</li>
                <li>tab2</li>
            </ul>
            <div class="box" v-show="tab_status=='tab1'">
                <a href="#" @click.prevent>跳转</a>
            </div>
            <div class="box" v-show="tab_status=='tab2'">
                <div class="da" style="width: 300px; height: 300px; text-align: center; border: 2px red solid;"
                    @click="fn3()">
                    大
                    <div class="zhong" style="width: 200px; height: 200px;text-align: center; border: 2px blue solid;"
                        @click.stop="fn4()">
                        中
                        <div class="xiao"
                            style="width: 100px; height: 100px;text-align: center; border: 2px aqua solid;"
                            @click="fn5()">
                            小
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="car">
            <ul>
                <li v-for="item in arr" :key="item.id">
                    <input type="checkbox" :checked="item.g_status" v-model="item.g_status" @click="clk(item)"
                        style="width: 25px; height: 25px;">
                    <img :src="item.g_imgurl" alt="1">
                    <span>{{item.g_name}}</span>
                    <span>{{item.g_price | fn11(item.g_price)}}</span>
                    <div>
                        <button @click="jian(item.g_id)">-</button>
                        <span>{{item.g_num}}</span>
                        <button @click="item.g_num++">+</button>
                    </div>
                </li>
            </ul>
            <div>
                <span>总价:{{priceAll | fn11(priceAll)}}</span>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#box',
            data: {
                tab_status: 'tab1',
                arr: [{
                    g_id: 0,
                    g_name: '格力空调',
                    g_price: 3899,
                    g_imgurl: '../images/蛇年生肖.png',
                    g_status: true,
                    g_num: 1
                }, {
                    g_id: 1,
                    g_name: '华为手机',
                    g_price: 2899,
                    g_imgurl: '../images/蛇年生肖.png',
                    g_status: false,
                    g_num: 1
                }, {
                    g_id: 2,
                    g_name: '小米su7',
                    g_price: 99988,
                    g_imgurl: '../images/蛇年生肖.png',
                    g_status: false,
                    g_num: 1
                },]
            },
            methods: {
                // 切换
                fn($event) {
                    if ($event.target.innerText == 'tab1') {
                        this.tab_status = 'tab1'
                    } else if ($event.target.innerText == 'tab2') {
                        this.tab_status = 'tab2'
                    }
                },
                fn3() {
                    console.log('大');
                },
                fn4() {
                    console.log('中');
                },
                fn5() {
                    console.log('小');
                },
                // 购物车
                // 减
                jian(id) {
                    if (this.arr.find(i => i.g_id == id) >= 1) {
                        this.arr.find(i => i.g_id == id).g_num--
                    } else {
                        alert('只剩一个了')
                    }
                },
                // dianji
                clk(item) {
                    item.g_status = !item.g_status
                    console.log(item);
                }
            },
            computed: {
                // 总价
                priceAll() {
                    let aa =0
                    this.arr.forEach(item=>{
                        if(item.g_status==true){
                            aa+= item.g_price*item.g_num
                        }
                    })
                    return aa
                }
            },
            filters: {
                fn11(p) {
                    if (!p) return '$0.00'
                    p = parseFloat(p.toString().replace(/\$|,/g, ''))
                    if (isNaN(p)) return '$0.00'
                    // 保留两位小数并添加千分位
                    return `$${p.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`
                }
            },
            mounted() {
                // let aa = this.arr.filter(i => i.g_status == true)
                // console.log(aa);

            }
        })
    </script>
</body>

</html>